<template>
	<view class="container">
		<view class="topline">
		</view>
		<view class="warp u-m-t-20">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业性质" prop="qyxz">
					<u-input type="select" :select-open="selectShowQyxz" v-model="model.qyxz" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQyxz = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="企业资质" prop="qyzz">
					<u-input type="select" :select-open="selectShowQyzz" v-model="model.qyzz" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQyzz = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="服务类型" prop="fwlx">
					<u-input type="select" :select-open="selectShowFwlx" v-model="model.fwlx" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowFwlx = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业地址" prop="qydz">
					<u-input type="select" :select-open="selectShowQydz" v-model="model.qydz" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQydz = true"></u-input>
				</u-form-item>

				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="人员规模" prop="rygm">
					<u-input type="select" :select-open="selectShowRygm" v-model="model.rygm" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowRygm = true"></u-input>
				</u-form-item>

			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="qyList" v-model="selectShowQyxz" @confirm="selectConfirmQyxz"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowQyzz" @confirm="selectConfirmQyzz"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowFwlx" @confirm="selectConfirmFwlx"></u-select>
			<u-select mode="single-column" :list="dzList" v-model="selectShowQydz" @confirm="selectConfirmQydz"></u-select>
			<u-select mode="single-column" :list="ryList" v-model="selectShowRygm" @confirm="selectConfirmRygm"></u-select>
			<u-select mode="single-column" :list="ryList" v-model="selectShowLyxy" @confirm="selectConfirmLyxy"></u-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			let that = this;
			return {
				/**
				 * form验证
				 * */
				model: {
				},
				selectList: [{
						value: '测试1',
						label: '测试1'
					},
					{
						value: '测试2',
						label: '测试2'
					},
					{
						value: '测试3',
						label: '测试3'
					}
				],
				qyList: [{
						value: '国企',
						label: '国企'
					},
					{
						value: '民营',
						label: '民营'
					},
					{
						value: '外资',
						label: '外资'
					}
				],
				ryList: [{
						value: '100',
						label: '100'
					},
					{
						value: '200',
						label: '200'
					},
					{
						value: '500',
						label: '500'
					}
				],
				dzList: [{
						value: '武汉',
						label: '武汉'
					},
					{
						value: '北京',
						label: '北京'
					},
					{
						value: '上海',
						label: '上海'
					}
				],
				rules: {
					qymc: [{
						required: false,
						message: '请输入企业名称',
						trigger: 'blur'
					}],
					ws: [{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}],
					wxy: [{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}],
					wyx: [{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}]
				},
				pageType: "",
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowQyxz: false,
				selectShowQyzz: false,
				selectShowFwlx: false,
				selectShowQydz: false,
				selectShowRygm: false,
				selectShowLyxy: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				/**/

				/**
				 * 数字统计
				 * */
				startVal: 500,
				endVal: 500,
				separator: ',',
				decimals: 0,
				duration: 2000,
				autoplay: true,
				useEasing: true,
				current: 3,
				isStop: false,
				bold: false,
				fontSize: 24,
				color: '#fff',
				/**/
				keyIndex: 0,
				keywords: '',
			};
		},
		mounted() {},
		onLoad(options){
			if(options.type){
				this.pageType = options.type;
			}
			if(options.data){
				let data = JSON.parse(decodeURIComponent(options.data));
				this.pageType = data.type;
				this.$delete(data,'type');
				this.model = data;
				console.log(this.model);
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if(this.pageType == "qiye"){
							this.$mRouter.push({
								route:this.$mRoutesConfig.zhqy,
							 	query:{
							 		hy:encodeURIComponent(JSON.stringify(this.model))
							 	}
							})
						}else if(this.pageType == "fuwu"){
							this.$mRouter.push({
								route:this.$mRoutesConfig.zhfw,
							 	query:{
							 		hy:encodeURIComponent(JSON.stringify(this.model))
							 	}
							})
						}
						
					} else {
						console.log('验证失败');
					}
				});
			},
			selectKey(e) {
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			// 选择
			selectConfirmQyxz(e) {
				this.model.qyxz = '';
				e.map((val, index) => {
					this.model.qyxz += this.model.qyxz == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQyzz(e) {
				this.model.qyzz = '';
				e.map((val, index) => {
					this.model.qyzz += this.model.qyzz == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmFwlx(e) {
				this.model.fwlx = '';
				e.map((val, index) => {
					this.model.fwlx += this.model.fwlx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQydz(e) {
				this.model.qydz = '';
				e.map((val, index) => {
					this.model.qydz += this.model.qydz == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmRygm(e) {
				this.model.rygm = '';
				e.map((val, index) => {
					this.model.rygm += this.model.rygm == '' ? val.label : '-' + val.label;
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	page {
		background: #fff;
	}

	.topline {
		width: 100%;
		height: 20rpx;
		background: #F5F5F9;
	}

	.warp {
		background: #fff;
	}

	.count {
		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 324rpx auto 95rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		font-size: 32rpx;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.word {
		font-size: 36rpx;
		color: #0d1d36;
		font-weight: bold;
	}

	.keywords {
		display: flex;
		flex-flow: wrap;

		view {
			margin: 0 20rpx 20rpx 0;
			padding: 8rpx 21rpx;
			background: #f6f6f6;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				display: block;
				width: 16rpx;
				height: 16rpx;
				margin-left: 19rpx;
				border: 4rpx solid #BDBDBD;
				border-radius: 8rpx;

			}

			&.selected {
				color: #4B9CFF;

				text {
					border-color: #4B9CFF;
					background-color: #4B9CFF;
				}
			}
		}
	}
</style>
